<template>
  <div style="height: 90vh;">
    <el-row :gutter="10">
      <el-col :span="20">
        <div id="mapContainer" ref="mapContainer"></div>
      </el-col>
      <el-col :span="4">
        <h4 class="mb-2" background-color="#545c64">湖泊名称</h4>

        <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          text-color="#fff"
          :default-active="activeIndex"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-menu-item v-for="(lake, index) in lakes" :key="index" :index="index.toString()" @click="handleMenuItemClick(lake.longitude, lake.latitude, lake.zoomLevel, index)">
            {{ lake.name }}
          </el-menu-item>
        </el-menu>

        <!-- 描述信息 -->
        <el-descriptions v-if="selectedLake.name" :column="3" border title="湖泊信息" size="small">
          <el-descriptions-item label="名称">{{ selectedLake.name }}</el-descriptions-item>
          <el-descriptions-item label="长度 (m)">{{ selectedLake.length }}</el-descriptions-item>
          <el-descriptions-item label="宽度 (m)">{{ selectedLake.width }}</el-descriptions-item>
          <el-descriptions-item label="面积 (km²)">{{ selectedLake.area }}</el-descriptions-item>
          <el-descriptions-item label="平均水深 (m)">{{ selectedLake.depth }}</el-descriptions-item>
          <el-descriptions-item label="备注">{{ selectedLake.note }}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';

// 湖列表
const lakes = [
  {
    name: '头池',
    length: 750,
    width: 750,
    area: 0.59,
    depth: 3.97,
    note: '',
    longitude: 126.189438,
    latitude: 48.674947,
    zoomLevel: 16
  },
  {
    name: '二池',
    length: 2500,
    width: 2000,
    area: 3.6,
    depth: 12.16,
    note: '',
    longitude: 126.191544,
    latitude: 48.692958,
    zoomLevel: 15
  },
  {
    name: '三池',
    length: 4600,
    width: 3000,
    area: 11.31,
    depth: 10.5,
    note: '',
    longitude: 126.219965,
    latitude: 48.731101,
    zoomLevel: 14
  },
  {
    name: '四池',
    length: 1100,
    width: 350,
    area: 0.47,
    depth: 3.28,
    note: '',
    longitude: 126.189985,
    latitude: 48.770505,
    zoomLevel: 16
  },
  {
    name: '五池',
    length: 5300,
    width: 2500,
    area: 6.86,
    depth: 4.31,
    note: '',
    longitude: 126.139889,
    latitude: 48.779037,
    zoomLevel: 14
  },
  {
    name: '药泉湖',
    length: 950,
    width: 300,
    area: 0.306,
    depth: 3,
    note: '',
    longitude: 126.149952,
    latitude: 48.658242,
    zoomLevel: 16
  },
  {
    name: '北月牙湖',
    length: 350,
    width: 100,
    area: 0.058,
    depth: 2,
    note: '',
    longitude: 126.090067,
    latitude: 48.751147,
    zoomLevel: 17
  },
  {
    name: '南月牙湖',
    length: 1300,
    width: 200,
    area: 0.234,
    depth: 3,
    note: '',
    longitude: 126.097033,
    latitude: 48.740103,
    zoomLevel: 17
  },
  {
    name: '大庆农场水库',
    length: 800,
    width: 250,
    area: 0.24,
    depth: '',
    note: '',
    longitude: 126.042936,
    latitude: 48.714005,
    zoomLevel: 16
  },
  {
    name: '团结水库',
    length: 2000,
    width: 650,
    area: 1.04,
    depth: 1.5,
    note: '',
    longitude: 126.09254,
    latitude: 48.593601,
    zoomLevel: 15
  }
];

// 选中的湖泊对象
const selectedLake = ref({
  name: '',
  length: 0,
  width: 0,
  area: 0,
  depth: 0,
  note: '',
  longitude: 0,
  latitude: 0,
  zoomLevel: 0
});

// 当前激活的菜单索引
const activeIndex = ref('');
// 地图配置选项
const mapOptions = {
  key: "fc463fbeb83f7cc7ddf02e2cae911488", // 申请好的Web端开发者Key
  version: "2.0", // 指定要加载的 JSAPI 的版本
};

// 地图状态
const mapState = ref({
  viewMode: "3D",
  scrollWheel: true,
  zoom: 14,
  center: [126.176868, 48.718028],
});

// 地图实例
let mapInstance = null;

function initMap() {
  AMapLoader.load(mapOptions).then((AMap) => {
    mapInstance = new AMap.Map("mapContainer", {
      viewMode: mapState.value.viewMode,
      scrollWheel: mapState.value.scrollWheel,
      zoom: mapState.value.zoom,
      center: mapState.value.center,
    });
  }).catch(e => {
    console.error('地图加载失败', e);
  });
}

// 监听 mapState 的变化以更新地图属性
watch(mapState, (newVal) => {
  if (mapInstance) {
    if (newVal.center) {
      mapInstance.setCenter(newVal.center);
    }
    if (newVal.zoom !== undefined) {
      mapInstance.setZoom(newVal.zoom);
    }
    // 可以在这里添加更多的属性设置逻辑...
  }
}, { deep: true });

// 提供修改地图状态的方法
function setMapCenter(newCenter) {
  mapState.value.center = newCenter;
}

function setMapZoom(newZoom) {
  mapState.value.zoom = newZoom;
}


const handleMenuItemClick = (longitude, latitude, zoom, index) => {
  activeIndex.value = index.toString(); // 更新激活的菜单索引
  setMapCenter([longitude, latitude]);
  setMapZoom(zoom);
  selectedLake.value = lakes[index]; // 简化赋值逻辑
}

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
}

const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
}

onMounted(() => {
  initMap();
});
</script>

<style scoped>
#mapContainer {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 90vh; /* 使用视口高度 */
}
</style>